<template>
  <l-layout class="l-tab-page">
    <l-panel :title="$t('语音播报')">
      <div class="pd-16">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入语音播报内容"
          @input="Voice"
          v-model="content"
        />
        <div class="mt-16">
          <el-button type="primary" size="mini" @click="handleStart"
            >播报</el-button
          >
          <el-button size="mini" @click="handleStop">停止</el-button>
        </div>
      </div>
    </l-panel>
  </l-layout>
</template>

<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {
      content: "",
    };
  },

  methods: {
    // 语音播报的函数
    handleSpeak(text) {
      msg.text = text;
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 1; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.speak(msg); // 播放
    },
    handleStart() {
      this.handleSpeak(this.content); // 传入需要播放的文字
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    },
  },
};
</script>
